<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery - 精美照片墙</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .hero-bg {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
            position: relative;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="%23d4af37" stop-opacity="0.1"/><stop offset="100%" stop-color="%23d4af37" stop-opacity="0"/></radialGradient></defs><circle cx="50" cy="50" r="50" fill="url(%23g)"/></svg>') center/cover;
            opacity: 0.3;
            animation: pulse 4s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.1; }
        }
        
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
        }
        
        .photo-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .photo-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
        }
        
        .photo-card img {
            transition: all 0.3s ease;
        }
        
        .photo-card:hover img {
            filter: brightness(1.1) contrast(1.1);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .masonry-grid {
            column-count: 4;
            column-gap: 1rem;
        }
        
        @media (max-width: 1024px) {
            .masonry-grid { column-count: 3; }
        }
        
        @media (max-width: 768px) {
            .masonry-grid { column-count: 2; }
        }
        
        @media (max-width: 480px) {
            .masonry-grid { column-count: 1; }
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-gold);
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
        }
        
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Floating Particles Background -->
    <div class="floating-particles" id="particles"></div>
    
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-bold gradient-text">Gallery</h1>
                </div>
                <!-- User Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="user-menu" class="hidden items-center space-x-3">
                        <button id="user-menu-btn" class="flex items-center space-x-2 text-gray-300 hover:text-yellow-400 transition-colors">
                            <img id="user-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-8 h-8 rounded-full">
                            <span id="username" class="text-sm font-medium"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <a href="login.html" id="login-btn" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">登录</a>
                    <a href="register.html" id="register-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg text-sm font-medium transition-colors">注册</a>
                </div>
                <div class="md:hidden">
                    <button class="text-gray-300 hover:text-yellow-400">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- User Dropdown Menu -->
        <div id="user-dropdown" class="hidden absolute right-4 top-16 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 z-50">
            <div class="py-2">
                <a href="profile.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">个人中心</a>
                <a href="upload.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">上传照片</a>
                <a href="gallery.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">我的照片</a>
                <hr class="border-gray-700">
                <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-red-400 transition-colors">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="min-h-screen flex items-center justify-center hero-bg relative">
        <div class="text-center z-10 max-w-4xl mx-auto px-4">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text" id="hero-title">
                视觉艺术空间
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto" id="hero-subtitle">
                探索精选摄影作品，感受光影之美，发现生活中的艺术瞬间
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center" id="hero-buttons">
                <a href="gallery.html" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                    探索照片墙
                </a>
                <button onclick="scrollToGallery()" class="border border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-black px-8 py-3 rounded-lg font-semibold transition-all">
                    浏览精选
                </button>
            </div>
        </div>
    </section>

    <!-- Featured Gallery Preview -->
    <section class="py-20 px-4" id="featured">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16 scroll-reveal">
                <h2 class="text-4xl md:text-5xl font-bold gradient-text mb-4">精选作品</h2>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    每一张照片都讲述着独特的故事，捕捉了转瞬即逝的美好瞬间
                </p>
            </div>
            
            <div class="masonry-grid" id="featured-gallery">
                <!-- Featured photos will be loaded here -->
            </div>
            
            <div class="text-center mt-12 scroll-reveal">
                <a href="gallery.html" class="inline-flex items-center bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                    查看完整照片墙
                    <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4 bg-gray-900">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16 scroll-reveal">
                <h2 class="text-4xl md:text-5xl font-bold gradient-text mb-4">功能特色</h2>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    提供丰富的交互功能，让您的照片浏览体验更加出色
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center p-8 rounded-xl bg-gray-800 hover:bg-gray-700 transition-all scroll-reveal">
                    <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">智能搜索</h3>
                    <p class="text-gray-400">通过关键词快速找到您感兴趣的照片内容</p>
                </div>
                
                <div class="text-center p-8 rounded-xl bg-gray-800 hover:bg-gray-700 transition-all scroll-reveal">
                    <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">多种布局</h3>
                    <p class="text-gray-400">支持瀑布流、网格、列表等多种展示方式</p>
                </div>
                
                <div class="text-center p-8 rounded-xl bg-gray-800 hover:bg-gray-700 transition-all scroll-reveal">
                    <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">收藏分享</h3>
                    <p class="text-gray-400">收藏喜爱的照片，与朋友分享美好时光</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <h3 class="text-2xl font-bold gradient-text mb-4">Gallery</h3>
                <p class="text-gray-400 max-w-md mx-auto">
                    用心记录每一个美好瞬间，用镜头诉说生活的故事
                </p>
            </div>
            <div class="border-t border-gray-800 pt-8">
                <p class="text-gray-500">
                    © 2025 Gallery. 保留所有权利。
                </p>
            </div>
        </div>
    </footer>

    <script src="mode/main.js"></script>
</body>
</html>